<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { useUserStore } from '@vben/stores';

import { Card, Timeline, TimelineItem } from 'ant-design-vue';

import { BaseLoginLogApi } from '#/api/basic/system/baseLoginLog';
import { Icon } from '#/components/icon';

const userStore = useUserStore();
const loginLogList = ref<any[]>([]);
onMounted(async () => {
  const list = await BaseLoginLogApi.pageAnyone({
    current: 1,
    size: 10,
    model: { userId: userStore.userInfo?.id },
  });
  loginLogList.value = list.records;
});
</script>
<template>
  <Timeline mode="left">
    <TimelineItem v-for="(item, index) of loginLogList" :key="index">
      <Card :title="`登录时间：${item.createdTime}`" size="small">
        <p>
          <Icon icon="ant-design:link-outlined" />
          {{ $t('devOperation.system.defLoginLog.requestIp') }}：{{
            item.requestIp
          }}
        </p>
        <p>
          <Icon icon="ant-design:environment-outlined" />
          {{ $t('devOperation.system.defLoginLog.location') }}：{{
            item.location
          }}
        </p>
        <p>
          <Icon icon="ant-design:chrome-filled" />
          {{ $t('devOperation.system.defLoginLog.browser') }}：{{
            item.browser
          }}
        </p>
        <p>
          <Icon icon="ant-design:windows-outlined" />
          {{ $t('devOperation.system.defLoginLog.operatingSystem') }}：{{
            item.operatingSystem
          }}
        </p>
      </Card>
    </TimelineItem>
  </Timeline>
</template>
